<!-- 品牌监控 下钻页 -->
<template>
  <div class="zs-table-page-container">
    <div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
      <span>
        <el-select v-model="queryParams.projectCode" filterable class="zs-select-md zs-space-right-sm"
          @change="changeProject" placeholder="项目名称">
          <el-option v-for="item in projectList" :key="item.biProjectCode" :label="item.projectName"
            :value="item.biProjectCode" />
        </el-select>
        <el-select v-model="queryParams.brandName" :teleported="false" class="zs-select-md zs-space-right-sm" filterable
          placeholder="品牌名称" clearable>
          <el-option v-for="item in brandDownList" :key="item.brand_id" :label="item.brand_name"
            :value="item.brand_name" />
        </el-select>
        <el-select v-model="queryParams.contractLabel" multiple collapse-tags :teleported="false"
          class="zs-select-md zs-space-right-sm" placeholder="合同标签" clearable>
          <el-option v-for="item in contractLabelArr" :key="item" :label="item" :value="item" />
        </el-select>
        <el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
          <template #reference>
            <el-button class="zs-btn-square-solid"
              :class="{ 'zs-btn-square-solid-active': queryParams.floorName || queryParams.rentStructure || queryParams.assetType || queryParams.salesCollection || queryParams.secondaryBusinessFormat || queryParams.yearmonth }">
              <el-icon>
                <MoreFilled />
              </el-icon>
            </el-button>
          </template>
          <template #default>
            <el-select v-model="queryParams.floorName" class="zs-select-md zs-space-right-sm" placeholder="楼层" clearable
              filterable :teleported="false">
              <el-option v-for="item in floorList" :key="item" :label="item" :value="item" />
            </el-select>
            <el-select v-model="queryParams.rentStructure" class="zs-select-md zs-space-right-sm" placeholder="租金架构"
              clearable :teleported="false">
              <el-option v-for="item in rentalStructure" :key="item" :label="item" :value="item" />
            </el-select>
            <el-select v-model="queryParams.assetType" class="zs-select-md zs-space-right-sm" placeholder="资产类型"
              clearable filterable :teleported="false">
              <el-option v-for="item in assetType" :key="item" :label="item" :value="item" />
            </el-select>
            <el-select v-model="queryParams.areaTypeList" multiple collapse-tags :teleported="false"
              class="zs-select-md zs-space-right-sm" placeholder="租赁面积" clearable>
              <el-option label="0~40㎡" value="1" />
              <el-option label="40~200㎡" value="2" />
              <el-option label="200~500㎡" value="3" />
              <el-option label="500㎡以上" value="4" />
            </el-select>
            <el-select v-model="queryParams.salesCollection" class="zs-select-md zs-space-right-sm zs-space-top-sm"
              placeholder="销售采集" clearable :teleported="false">
              <el-option v-for="item in salesAcquisitionArr" :key="item" :label="item" :value="item" />
            </el-select>
            <el-select v-model="queryParams.secondaryBusinessFormat"
              class="zs-select-md zs-space-right-sm zs-space-top-sm" placeholder="二级业态" clearable :teleported="false"
              filterable>
              <el-option v-for="item in twoLevelList" :key="item.dicValue" :label="item.dicName"
                :value="item.dicValue" />
            </el-select>
            <el-date-picker class="zs-select-md zs-space-right-sm zs-space-top-sm" v-model="queryParams.yearmonth"
              type="month" placeholder="日期" :clearable="false" value-format="YYYY-MM" @change="getBrandDownList" />
          </template>
        </el-popover>
        <el-button @click="getList" class="zs-btn-plain">查询</el-button>
      </span>
      <span class="zs-layout-flex-row">
        <el-button class="zs-btn-plain" @click="handleDownload"><el-icon class="el-icon--left">
            <Upload />
          </el-icon>导出</el-button>
      </span>
    </div>
    <div class="zs-card zs-table-page-content">
      <hsTableV2 class="zs-table-page-main db-table-self-tootip" :loading="tableData.loading" isMultistageHeader
        :columns="tableData.cloumns" :data="tableData.data" fixed :multistageHeaderData="multistageData" :key="test">
      </hsTableV2>
      <div class="zs-text-gray-dark zs-text-sm zs-space-top">*销售额/保底销售/超保销售/月租费：万元；月坪效：元/㎡/月；</div>
      <div class="zs-space-top-sm zs-table-page-pagination">
        <el-pagination v-model:currentPage="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
          :page-sizes="curPageSizes" :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
  <LabelConfigurationDialog v-if="isShowAddDrawer" :isShow="isShowAddDrawer" :selectItem="selectItem"
    @close="closeFormDrawer">
  </LabelConfigurationDialog>
</template>

<script setup lang="jsx">
import LabelConfigurationDialog from './labelConfigurationDialog'
import dbPublicApi from '@/api/dbPublic'
import { toThousands } from '@/utils/number-util'
import detailApi from '@/api/Manage/Business/detailPages'
import { downloadNewFile } from "@/utils/publicUtils"
import { reactive, ref } from "vue"
import { useRoute } from "vue-router";
const route = useRoute()
const { biProjectCode, dataTime, resourceKey, pageType } = route.query
let isShowAddDrawer = ref(false)
let selectItem = ref({})
const closeFormDrawer = (data) => {
  isShowAddDrawer.value = data.isShow
  // getList()
}
//筛选选项数组
const salesAcquisitionArr = ref(['POS机', '采集器', '独立收银', '其他'])
const rentalStructure = ref(['固定租金', '提成租金', '两者取高'])
const contractLabelArr = ref(['新开业', '新开业/监控', '监控', '常规'])
const assetType = ref(['商铺'])
let floorList = ref([]) // 楼层列表
let twoLevelList = ref([]) // 二级业态列表
let brandDownList = ref([]) // 品牌下拉筛选列表
const curPageSizes = ref([20, 30, 50, 100])

// 查询条件
let queryParams = reactive({
  projectCode: biProjectCode,//项目Code	
  pageType: pageType,//1新开业(默认),2高租售比
  yearmonth: '',//查询日期
  assetType: '',//资产类型
  brandName: '',//品牌名称
  contractLabel: [],//合同标签
  floorName: '',//楼层
  pageNum: 1,//页码
  pageSize: 30,//条数
  rentStructure: '',//租金架构
  salesCollection: '',//销售采集
  secondaryBusinessFormat: '',//二级业态
  areaTypeList: []//租赁面积
})
const celWidth = 130
let tableData = reactive({
  loading: false,
  data: [],
  total: 0,
  cloumns: [
    {
      key: "index",
      dataKey: "index",
      title: "序号",
      align: "left",
      width: 60,
      fixed: true,
      cellRenderer: ({ rowIndex }) => (
        rowIndex + 1 + queryParams.pageSize * (queryParams.pageNum - 1)
      )
    },
    {
      key: "floor_name",
      dataKey: "floor_name",
      title: "楼层",
      width: 50,
      align: "left",
      fixed: true,
      // cellRenderer: ({ rowData }) => (
      //   rowData.floor_name
      // )
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.floor_name && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt zs-text-ellipsis" style="width: 30px">{rowData.floor_name}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0, 'cur-tooltip': true }}>{rowData.floor_name}</div>
        </div>)
      )
    },
    {
      key: "brand_name",
      dataKey: "brand_name",
      title: "品牌名称",
      width: 200,
      align: "left",
      fixed: true,
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.brand_name && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt zs-text-ellipsis" style="width: 160px">{rowData.brand_name}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0, 'cur-tooltip': true }}>{rowData.brand_name}</div>
        </div>)
      )
    },
    {
      key: "user_area",
      dataKey: "user_area",
      title: "租赁面积",
      width: 100,
      align: "right",
      fixed: false,
      cellRenderer: ({ rowData }) => (
        rowData.user_area
      )
    },
    {
      key: "chargestartdate",
      dataKey: "chargestartdate",
      title: "开业时间",
      width: celWidth,
      align: "center",
      fixed: false,
      cellRenderer: ({ rowData }) => (
        rowData.chargestartdate
      )
    },
    {
      key: "rental_structure",
      dataKey: "rental_structure",
      title: "租金架构",
      width: 100,
      align: "center",
      fixed: false,
      cellRenderer: ({ rowData }) => (
        rowData.rental_structure
      )
    },
    {
      key: "contractsLabel",
      dataKey: "contractsLabel",
      title: "合同标签",
      width: 100,
      align: "center",
      fixed: false,
      cellRenderer: ({ rowData }) => (
        rowData.contractsLabel
      )
    },
    {
      key: "contract_type",
      dataKey: "contract_type",
      title: "签约类型",
      width: 100,
      align: "center",
      fixed: false,
      cellRenderer: ({ rowData }) => (
        rowData.contract_type
      )
    },
    {
      key: "store_space_type",
      dataKey: "store_space_type",
      title: "铺位类型",
      width: 100,
      align: "center",
      fixed: false,
      cellRenderer: ({ rowData }) => (
        rowData.store_space_type
      )
    },
    //近6个月月均经营指标
    {
      key: "avg_day_sales",
      dataKey: "avg_day_sales",
      title: "销售额",
      align: "right",
      width: 100,
      parentKey: 'multCol_avg',
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.avg_day_sales && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt">{rowData.avg_day_sales}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0 }}>{rowData.avg_day_sales_yuan}</div>
        </div>)
      )
    },
    {
      key: "avg_monthly_sales_per_sqm",
      dataKey: "avg_monthly_sales_per_sqm",
      title: "坪效",
      align: "right",
      width: 100,
      parentKey: 'multCol_avg',
      headerCellRenderer: () => (
        <>
          坪效
          <el-popover placement="bottom" width="140" trigger="hover">
            {{
              reference: () => <i class="icon-i zs-text-gray zs-space-left-min"></i>,
              default: () => <div v-html={'月坪效相加/月数'}></div>
            }}
          </el-popover>
        </>
      ),
      cellRenderer: ({ rowData }) => (
        toThousands(rowData.avg_monthly_sales_per_sqm)
      )
    },
    {
      key: "avg_rental_sales_ratio",
      dataKey: "avg_rental_sales_ratio",
      title: "租售比",
      align: "right",
      width: 100,
      parentKey: 'multCol_avg',
      headerCellRenderer: () => (
        <>
          租售比
          <el-popover placement="bottom" width="140" trigger="hover">
            {{
              reference: () => <i class="icon-i zs-text-gray zs-space-left-min"></i>,
              default: () => <div v-html={'月租费/销售额'}></div>
            }}
          </el-popover>
        </>
      ),
      cellRenderer: ({ rowData }) => (
        <span class={handleRentalSalesRatioColor(rowData.avg_rental_sales_ratio_color)}>{toThousands(rowData.avg_rental_sales_ratio)}</span>
      )
    },
    {
      key: "commission_count",
      dataKey: "commission_count",
      title: "提成次数",
      align: "right",
      width: 100,
      parentKey: 'multCol_avg',
      cellRenderer: ({ rowData }) => (
        toThousands(rowData.commission_count)
      )
    },
    {
      key: "avg_pcent",
      dataKey: "avg_pcent",
      title: "扣点",
      align: "right",
      width: 80,
      parentKey: 'multCol_avg',
      cellRenderer: ({ rowData }) => (
        toThousands(rowData.avg_pcent)
      )
    },
    {
      key: "avg_guaranteed_sales",
      dataKey: "avg_guaranteed_sales",
      title: "保底销售",
      align: "right",
      width: 90,
      parentKey: 'multCol_avg',
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.avg_guaranteed_sales && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt">{rowData.avg_guaranteed_sales}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0 }}>{rowData.avg_guaranteed_sales_yuan}</div>
        </div>)
      )
    },
    {
      key: "avg_sales_rate",
      dataKey: "first_sales_rate",
      title: "销售达成率",
      align: "right",
      width: 100,
      parentKey: 'multCol_avg',
      cellRenderer: ({ rowData }) => (
        <span class={handlesSalesRateColor(rowData.avg_sales_rate_color)}>{rowData.avg_sales_rate}</span>
      )
    },
    // 当前月
    {
      key: "first_sales",
      dataKey: "first_sales",
      title: "销售额",
      align: "right",
      width: 100,
      parentKey: 'multCol_first',
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.first_sales && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt">{rowData.first_sales}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0 }}>{rowData.first_sales_yuan}</div>
        </div>)
      )
    },
    {
      key: "first_space_efficiency",
      dataKey: "first_space_efficiency",
      title: "月坪效",
      align: "right",
      width: 100,
      parentKey: 'multCol_first',
      headerCellRenderer: () => (
        <>
          月坪效
          <el-popover placement="bottom" width="280" trigger="hover">
            {{
              reference: () => <i class="icon-i zs-text-gray zs-space-left-min"></i>,
              default: () => <div v-html={'（销售额/经营天数*30）/月末起租面积'}></div>
            }}
          </el-popover>
        </>
      ),
      cellRenderer: ({ rowData }) => (
        toThousands(rowData.first_space_efficiency)
      )
    },
    {
      key: "first_fixed_rent",
      dataKey: "first_fixed_rent",
      title: "固定租金",
      align: "right",
      width: 80,
      parentKey: 'multCol_first',
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.first_fixed_rent && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt">{rowData.first_fixed_rent}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0 }}>{rowData.first_fixed_rent_yuan}</div>
        </div>)
      )
    },
    {
      key: "first_commission_rent",
      dataKey: "first_commission_rent",
      title: "提成租金",
      align: "right",
      width: 80,
      parentKey: 'multCol_first',
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.first_commission_rent && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt">{rowData.first_commission_rent}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0 }}>{rowData.first_commission_rent_yuan}</div>
        </div>)
      )
    },
    {
      key: "first_rental_sales_ratio",
      dataKey: "first_rental_sales_ratio",
      title: "租售比",
      align: "right",
      width: 100,
      parentKey: 'multCol_first',
      headerCellRenderer: () => (
        <>
          租售比
          <el-popover placement="bottom" width="140" trigger="hover">
            {{
              reference: () => <i class="icon-i zs-text-gray zs-space-left-min"></i>,
              default: () => <div v-html={'月租费/销售额'}></div>
            }}
          </el-popover>
        </>
      ),
      cellRenderer: ({ rowData }) => (
        <span class={handleRentalSalesRatioColor(rowData.first_rental_sales_ratio_color)}>{toThousands(rowData.first_rental_sales_ratio)}</span>
      )
    },
    {
      key: "first_deductions",
      dataKey: "first_deductions",
      title: "扣点",
      align: "right",
      width: 80,
      parentKey: 'multCol_first',
      cellRenderer: ({ rowData }) => (
        toThousands(rowData.first_deductions)
      )
    },
    {
      key: "first_min_sales_amount",
      dataKey: "first_min_sales_amount",
      title: "保底销售",
      align: "right",
      width: 90,
      parentKey: 'multCol_first',
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.first_min_sales_amount && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt">{rowData.first_min_sales_amount}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0 }}>{rowData.first_min_sales_amount_yuan}</div>
        </div>)
      )
    },
    {
      key: "first_sales_rate",
      dataKey: "first_sales_rate",
      title: "销售达成率",
      align: "right",
      width: 100,
      parentKey: 'multCol_first',
      cellRenderer: ({ rowData }) => (
        <span class={handlesSalesRateColor(rowData.first_sales_rate_color)}>{rowData.first_sales_rate}</span>
      )
    },
    // 上1个月
    {
      key: "second_sales",
      dataKey: "second_sales",
      title: "销售额",
      align: "right",
      width: 100,
      parentKey: 'multCol_second',
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.second_sales && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt">{rowData.second_sales}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0 }}>{rowData.second_sales_yuan}</div>
        </div>)
      )
    },
    {
      key: "second_space_efficiency",
      dataKey: "second_space_efficiency",
      title: "月坪效",
      align: "right",
      width: 100,
      parentKey: 'multCol_second',
      headerCellRenderer: () => (
        <>
          月坪效
          <el-popover placement="bottom" width="280" trigger="hover">
            {{
              reference: () => <i class="icon-i zs-text-gray zs-space-left-min"></i>,
              default: () => <div v-html={'（销售额/经营天数*30）/月末起租面积'}></div>
            }}
          </el-popover>
        </>
      ),
      cellRenderer: ({ rowData }) => (
        toThousands(rowData.second_space_efficiency)
      )
    },
    {
      key: "second_fixed_rent",
      dataKey: "second_fixed_rent",
      title: "固定租金",
      align: "right",
      width: 80,
      parentKey: 'multCol_second',
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.second_fixed_rent && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt">{rowData.second_fixed_rent}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0 }}>{rowData.second_fixed_rent_yuan}</div>
        </div>)
      )
    },
    {
      key: "second_commission_rent",
      dataKey: "second_commission_rent",
      title: "提成租金",
      align: "right",
      width: 80,
      parentKey: 'multCol_second',
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.second_commission_rent && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt">{rowData.second_commission_rent}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0 }}>{rowData.second_commission_rent_yuan}</div>
        </div>)
      )
    },
    {
      key: "second_rental_sales_ratio",
      dataKey: "second_rental_sales_ratio",
      title: "租售比",
      align: "right",
      width: 100,
      parentKey: 'multCol_second',
      headerCellRenderer: () => (
        <>
          租售比
          <el-popover placement="bottom" width="140" trigger="hover">
            {{
              reference: () => <i class="icon-i zs-text-gray zs-space-left-min"></i>,
              default: () => <div v-html={'月租费/销售额'}></div>
            }}
          </el-popover>
        </>
      ),
      cellRenderer: ({ rowData }) => (
        <span class={handleRentalSalesRatioColor(rowData.second_rental_sales_ratio_color)}>{toThousands(rowData.second_rental_sales_ratio)}</span>
      )
    },
    {
      key: "second_deductions",
      dataKey: "second_deductions",
      title: "扣点",
      align: "right",
      width: 80,
      parentKey: 'multCol_second',
      cellRenderer: ({ rowData }) => (
        toThousands(rowData.second_deductions)
      )
    },
    {
      key: "second_min_sales_amount",
      dataKey: "second_min_sales_amount",
      title: "保底销售",
      align: "right",
      width: 90,
      parentKey: 'multCol_second',
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.second_min_sales_amount && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt">{rowData.second_min_sales_amount}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0 }}>{rowData.second_min_sales_amount_yuan}</div>
        </div>)
      )
    },
    {
      key: "second_sales_rate",
      dataKey: "second_sales_rate",
      title: "销售达成率",
      align: "right",
      width: 100,
      parentKey: 'multCol_second',
      cellRenderer: ({ rowData }) => (
        <span class={handlesSalesRateColor(rowData.second_sales_rate_color)}>{rowData.second_sales_rate}</span>
      )
    },
    // 上2个月
    {
      key: "third_sales",
      dataKey: "third_sales",
      title: "销售额",
      align: "right",
      width: 100,
      parentKey: 'multCol_third',
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.third_sales && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt">{rowData.third_sales}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0 }}>{rowData.third_sales_yuan}</div>
        </div>)
      )
    },
    {
      key: "third_space_efficiency",
      dataKey: "third_space_efficiency",
      title: "月坪效",
      align: "right",
      width: 100,
      parentKey: 'multCol_third',
      headerCellRenderer: () => (
        <>
          月坪效
          <el-popover placement="bottom" width="280" trigger="hover">
            {{
              reference: () => <i class="icon-i zs-text-gray zs-space-left-min"></i>,
              default: () => <div v-html={'（销售额/经营天数*30）/月末起租面积'}></div>
            }}
          </el-popover>
        </>
      ),
      cellRenderer: ({ rowData }) => (
        toThousands(rowData.third_space_efficiency)
      )
    },
    {
      key: "third_fixed_rent",
      dataKey: "third_fixed_rent",
      title: "固定租金",
      align: "right",
      width: 80,
      parentKey: 'multCol_third',
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.third_fixed_rent && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt">{rowData.third_fixed_rent}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0 }}>{rowData.third_fixed_rent_yuan}</div>
        </div>)
      )
    },
    {
      key: "third_commission_rent",
      dataKey: "third_commission_rent",
      title: "提成租金",
      align: "right",
      width: 80,
      parentKey: 'multCol_third',
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.third_commission_rent && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt">{rowData.third_commission_rent}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0 }}>{rowData.third_commission_rent_yuan}</div>
        </div>)
      )
    },
    {
      key: "third_rental_sales_ratio",
      dataKey: "third_rental_sales_ratio",
      title: "租售比",
      align: "right",
      width: 100,
      parentKey: 'multCol_third',
      headerCellRenderer: () => (
        <>
          租售比
          <el-popover placement="bottom" width="140" trigger="hover">
            {{
              reference: () => <i class="icon-i zs-text-gray zs-space-left-min"></i>,
              default: () => <div v-html={'月租费/销售额'}></div>
            }}
          </el-popover>
        </>
      ),
      cellRenderer: ({ rowData }) => (
        <span class={handleRentalSalesRatioColor(rowData.third_rental_sales_ratio_color)}>{toThousands(rowData.third_rental_sales_ratio)}</span>
      )
    },
    {
      key: "third_deductions",
      dataKey: "third_deductions",
      title: "扣点",
      align: "right",
      width: 80,
      parentKey: 'multCol_third',
      cellRenderer: ({ rowData }) => (
        toThousands(rowData.third_deductions)
      )
    },
    {
      key: "third_min_sales_amount",
      dataKey: "third_min_sales_amount",
      title: "保底销售",
      align: "right",
      width: 90,
      parentKey: 'multCol_third',
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.third_min_sales_amount && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt">{rowData.third_min_sales_amount}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0 }}>{rowData.third_min_sales_amount_yuan}</div>
        </div>)
      )
    },
    {
      key: "third_sales_rate",
      dataKey: "third_sales_rate",
      title: "销售达成率",
      align: "right",
      width: 100,
      parentKey: 'multCol_third',
      cellRenderer: ({ rowData }) => (
        <span class={handlesSalesRateColor(rowData.third_sales_rate_color)}>{rowData.third_sales_rate}</span>
      )
    },
    // 上3个月
    {
      key: "fourth_sales",
      dataKey: "fourth_sales",
      title: "销售额",
      align: "right",
      width: 100,
      parentKey: 'multCol_fourth',
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.fourth_sales && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt">{rowData.fourth_sales}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0 }}>{rowData.fourth_sales_yuan}</div>
        </div>)
      )
    },
    {
      key: "fourth_space_efficiency",
      dataKey: "fourth_space_efficiency",
      title: "月坪效",
      align: "right",
      width: 100,
      parentKey: 'multCol_fourth',
      headerCellRenderer: () => (
        <>
          月坪效
          <el-popover placement="bottom" width="280" trigger="hover">
            {{
              reference: () => <i class="icon-i zs-text-gray zs-space-left-min"></i>,
              default: () => <div v-html={'（销售额/经营天数*30）/月末起租面积'}></div>
            }}
          </el-popover>
        </>
      ),
      cellRenderer: ({ rowData }) => (
        toThousands(rowData.fourth_space_efficiency)
      )
    },
    {
      key: "fourth_fixed_rent",
      dataKey: "fourth_fixed_rent",
      title: "固定租金",
      align: "right",
      width: 80,
      parentKey: 'multCol_fourth',
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.fourth_fixed_rent && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt">{rowData.fourth_fixed_rent}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0 }}>{rowData.fourth_fixed_rent_yuan}</div>
        </div>)
      )
    },
    {
      key: "fourth_commission_rent",
      dataKey: "fourth_commission_rent",
      title: "提成租金",
      align: "right",
      width: 80,
      parentKey: 'multCol_fourth',
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.fourth_commission_rent && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt">{rowData.fourth_commission_rent}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0 }}>{rowData.fourth_commission_rent_yuan}</div>
        </div>)
      )
    },
    {
      key: "fourth_rental_sales_ratio",
      dataKey: "fourth_rental_sales_ratio",
      title: "租售比",
      align: "right",
      width: 100,
      parentKey: 'multCol_fourth',
      headerCellRenderer: () => (
        <>
          租售比
          <el-popover placement="bottom" width="140" trigger="hover">
            {{
              reference: () => <i class="icon-i zs-text-gray zs-space-left-min"></i>,
              default: () => <div v-html={'月租费/销售额'}></div>
            }}
          </el-popover>
        </>
      ),
      cellRenderer: ({ rowData }) => (
        <span class={handleRentalSalesRatioColor(rowData.fourth_rental_sales_ratio_color)}>{toThousands(rowData.fourth_rental_sales_ratio)}</span>
      )
    },
    {
      key: "fourth_deductions",
      dataKey: "fourth_deductions",
      title: "扣点",
      align: "right",
      width: 80,
      parentKey: 'multCol_fourth',
      cellRenderer: ({ rowData }) => (
        toThousands(rowData.fourth_deductions)
      )
    },
    {
      key: "fourth_min_sales_amount",
      dataKey: "fourth_min_sales_amount",
      title: "保底销售",
      align: "right",
      width: 90,
      parentKey: 'multCol_fourth',
      cellRenderer: ({ rowData }) => (
        <ElTooltip content={rowData.fourth_min_sales_amount_yuan} placement="top">{toThousands(rowData.fourth_min_sales_amount)}</ElTooltip>

      )
    },
    {
      key: "fourth_sales_rate",
      dataKey: "fourth_sales_rate",
      title: "销售达成率",
      align: "right",
      width: 100,
      parentKey: 'multCol_fourth',
      cellRenderer: ({ rowData }) => (
        <span class={handlesSalesRateColor(rowData.fourth_sales_rate_color)}>{rowData.fourth_sales_rate}</span>
      )
    },
    // 上4个月
    {
      key: "fifth_sales",
      dataKey: "fifth_sales",
      title: "销售额",
      align: "right",
      width: 100,
      parentKey: 'multCol_fifth',
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.fifth_sales && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt">{rowData.fifth_sales}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0 }}>{rowData.fifth_sales_yuan}</div>
        </div>)
      )
    },
    {
      key: "fifth_space_efficiency",
      dataKey: "fifth_space_efficiency",
      title: "月坪效",
      align: "right",
      width: 100,
      parentKey: 'multCol_fifth',
      headerCellRenderer: () => (
        <>
          月坪效
          <el-popover placement="bottom" width="280" trigger="hover">
            {{
              reference: () => <i class="icon-i zs-text-gray zs-space-left-min"></i>,
              default: () => <div v-html={'（销售额/经营天数*30）/月末起租面积'}></div>
            }}
          </el-popover>
        </>
      ),
      cellRenderer: ({ rowData }) => (
        toThousands(rowData.fifth_space_efficiency)
      )
    },
    {
      key: "fifth_fixed_rent",
      dataKey: "fifth_fixed_rent",
      title: "固定租金",
      align: "right",
      width: 80,
      parentKey: 'multCol_fifth',
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.fifth_fixed_rent && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt">{rowData.fifth_fixed_rent}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0 }}>{rowData.fifth_fixed_rent_yuan}</div>
        </div>)
      )
    },
    {
      key: "fifth_commission_rent",
      dataKey: "fifth_commission_rent",
      title: "提成租金",
      align: "right",
      width: 80,
      parentKey: 'multCol_fifth',
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.fifth_commission_rent && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt">{rowData.fifth_commission_rent}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0 }}>{rowData.fifth_commission_rent_yuan}</div>
        </div>)
      )
    },
    {
      key: "fifth_rental_sales_ratio",
      dataKey: "fifth_rental_sales_ratio",
      title: "租售比",
      align: "right",
      width: 100,
      parentKey: 'multCol_fifth',
      headerCellRenderer: () => (
        <>
          租售比
          <el-popover placement="bottom" width="140" trigger="hover">
            {{
              reference: () => <i class="icon-i zs-text-gray zs-space-left-min"></i>,
              default: () => <div v-html={'月租费/销售额'}></div>
            }}
          </el-popover>
        </>
      ),
      cellRenderer: ({ rowData }) => (
        <span class={handleRentalSalesRatioColor(rowData.fifth_rental_sales_ratio_color)}>{toThousands(rowData.fifth_rental_sales_ratio)}</span>
      )
    },
    {
      key: "fifth_deductions",
      dataKey: "fifth_deductions",
      title: "扣点",
      align: "right",
      width: 80,
      parentKey: 'multCol_fifth',
      cellRenderer: ({ rowData }) => (
        toThousands(rowData.fifth_deductions)
      )
    },
    {
      key: "fifth_min_sales_amount",
      dataKey: "fifth_min_sales_amount",
      title: "保底销售",
      align: "right",
      width: 90,
      parentKey: 'multCol_fifth',
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.fifth_min_sales_amount && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt">{rowData.fifth_min_sales_amount}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0 }}>{rowData.fifth_min_sales_amount_yuan}</div>
        </div>)
      )
    },
    {
      key: "fifth_sales_rate",
      dataKey: "fifth_sales_rate",
      title: "销售达成率",
      align: "right",
      width: 100,
      parentKey: 'multCol_fifth',
      cellRenderer: ({ rowData }) => (
        <span class={handlesSalesRateColor(rowData.fifth_sales_rate_color)}>{rowData.fifth_sales_rate}</span>
      )
    },
    // 上5个月
    {
      key: "sixth_sales",
      dataKey: "sixth_sales",
      title: "销售额",
      align: "right",
      width: 100,
      parentKey: 'multCol_sixth',
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.sixth_sales && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt">{rowData.sixth_sales}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0 }}>{rowData.sixth_sales_yuan}</div>
        </div>)
      )
    },
    {
      key: "sixth_space_efficiency",
      dataKey: "sixth_space_efficiency",
      title: "月坪效",
      align: "right",
      width: 100,
      parentKey: 'multCol_sixth',
      headerCellRenderer: () => (
        <>
          月坪效
          <el-popover placement="bottom" width="280" trigger="hover">
            {{
              reference: () => <i class="icon-i zs-text-gray zs-space-left-min"></i>,
              default: () => <div v-html={'（销售额/经营天数*30）/月末起租面积'}></div>
            }}
          </el-popover>
        </>
      ),
      cellRenderer: ({ rowData }) => (
        toThousands(rowData.sixth_space_efficiency)
      )
    },
    {
      key: "sixth_fixed_rent",
      dataKey: "sixth_fixed_rent",
      title: "固定租金",
      align: "right",
      width: 80,
      parentKey: 'multCol_sixth',
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.sixth_fixed_rent && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt">{rowData.sixth_fixed_rent}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0 }}>{rowData.sixth_fixed_rent_yuan}</div>
        </div>)
      )
    },
    {
      key: "sixth_commission_rent",
      dataKey: "sixth_commission_rent",
      title: "提成租金",
      align: "right",
      width: 80,
      parentKey: 'multCol_sixth',
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.sixth_commission_rent && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt">{rowData.sixth_commission_rent}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0 }}>{rowData.sixth_commission_rent_yuan}</div>
        </div>)
      )
    },
    {
      key: "sixth_rental_sales_ratio",
      dataKey: "sixth_rental_sales_ratio",
      title: "租售比",
      align: "right",
      width: 100,
      parentKey: 'multCol_sixth',
      headerCellRenderer: () => (
        <>
          租售比
          <el-popover placement="bottom" width="140" trigger="hover">
            {{
              reference: () => <i class="icon-i zs-text-gray zs-space-left-min"></i>,
              default: () => <div v-html={'月租费/销售额'}></div>
            }}
          </el-popover>
        </>
      ),
      cellRenderer: ({ rowData }) => (
        <span class={handleRentalSalesRatioColor(rowData.sixth_rental_sales_ratio_color)}>{toThousands(rowData.sixth_rental_sales_ratio)}</span>
      )
    },
    {
      key: "sixth_deductions",
      dataKey: "sixth_deductions",
      title: "扣点",
      align: "right",
      width: 80,
      parentKey: 'multCol_sixth',
      cellRenderer: ({ rowData }) => (
        toThousands(rowData.sixth_deductions)
      )
    },
    {
      key: "sixth_min_sales_amount",
      dataKey: "sixth_min_sales_amount",
      title: "保底销售",
      align: "right",
      width: 90,
      parentKey: 'multCol_sixth',
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.sixth_min_sales_amount && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt">{rowData.sixth_min_sales_amount}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0 }}>{rowData.sixth_min_sales_amount_yuan}</div>
        </div>)
      )
    },
    {
      key: "sixth_sales_rate",
      dataKey: "sixth_sales_rate",
      title: "销售达成率",
      align: "right",
      width: 100,
      parentKey: 'multCol_sixth',
      cellRenderer: ({ rowData }) => (
        <span class={handlesSalesRateColor(rowData.sixth_sales_rate_color)}>{rowData.sixth_sales_rate}</span>
      )
    },
    // 其他字段
    {
      key: "bizmode",
      dataKey: "bizmode",
      title: "资产类型",
      width: celWidth,
      align: "center",
      borderLeft: true,
      cellRenderer: ({ rowData }) => (
        rowData.bizmode
      ),
    },
    {
      key: "conshopcode",
      dataKey: "conshopcode",
      title: "铺位编号",
      width: celWidth,
      align: "left",
      cellRenderer: ({ rowData, rowIndex }) => (
        rowData.conshopcode && (<div class="db-slef-tooltip">
          <span class="db-tooltip-txt">{rowData.conshopcode}</span>
          <div class={{ 'db-tooltip-content-bottom': rowIndex == 0, 'db-tooltip-content-top': rowIndex > 0 }}>{rowData.conshopcode}</div>
        </div>)
      )
    },
    {
      key: "contractscode",
      dataKey: "contractscode",
      title: "合同编码",
      width: celWidth,
      align: "center",
      cellRenderer: ({ rowData }) => (
        rowData.contractscode
      )
    },
    {
      key: "constartdate",
      dataKey: "constartdate",
      title: "合同开始",
      width: celWidth,
      align: "center",
      cellRenderer: ({ rowData }) => (
        rowData.constartdate
      )
    },
    {
      key: "conenddate",
      dataKey: "conenddate",
      title: "合同结束",
      width: celWidth,
      align: "center",
      cellRenderer: ({ rowData }) => (
        rowData.conenddate
      )
    },
    {
      key: "contract_status",
      dataKey: "contract_status",
      title: "合同状态",
      width: celWidth,
      align: "center",
      cellRenderer: ({ rowData }) => (
        rowData.contract_status
      )
    },
    {
      key: "sales_collection",
      dataKey: "sales_collection",
      title: "销售采集",
      width: celWidth,
      align: "center",
      cellRenderer: ({ rowData }) => (
        rowData.sales_collection
      )
    },
    {
      key: "first_format",
      dataKey: "first_format",
      title: "一级业态",
      width: celWidth,
      align: "center",
      cellRenderer: ({ rowData }) => (
        rowData.first_format
      )
    },
    {
      key: "second_format",
      dataKey: "second_format",
      title: "二级业态",
      width: celWidth,
      align: "center",
      cellRenderer: ({ rowData }) => (
        rowData.second_format
      )
    },
    {
      key: "third_format",
      dataKey: "third_format",
      title: "三级业态",
      width: celWidth,
      align: "center",
      cellRenderer: ({ rowData }) => (
        rowData.third_format
      )
    },
    {
      key: "config",
      dataKey: "config",
      title: "配置",
      width: celWidth,
      align: "center",
      cellRenderer: ({ rowData }) => (
        <template class={'zs-layout-flex-row zs-layout-items-center'}>
          <el-button class="zs-link" link size="small" onClick={() => { selectItem.value = rowData; isShowAddDrawer.value = true }} disabled>销售</el-button>
          <span class="zs-text-gray-light zs-space-left-sm zs-space-right-sm">|</span>
          <el-button class="zs-link" link size="small" onClick={() => { selectItem.value = rowData; isShowAddDrawer.value = true }}>标签</el-button>
        </template>
      )
    },
  ],
});

//判断租售比字段颜色
const handleRentalSalesRatioColor = function (code) {
  let className = ''
  if (pageType == '1') {
    return
  } else if (pageType == '2') {
    if (code == '1') {
      className = 'zs-text-red'
    }
    if (code == '3') {
      className = 'zs-text-green'
    }
  }
  return className
}
//判断销售达成率字段颜色
const handlesSalesRateColor = function (code) {
  let className = ''
  if (pageType == '1') {
    if (code == '1') {
      className = 'zs-text-red'
    }
    if (code == '3') {
      className = 'zs-text-green'
    }
  } else if (pageType == '2') {
    return
  }
  return className
}
// 分页
const handleSizeChange = (val) => {
  queryParams.pageSize = val
  getList()
}
const handleCurrentChange = (val) => {
  queryParams.pageNum = val
  getList()
}
//获取月份
const queryDataUpdateTime = async () => {
  await dbPublicApi.queryMonthsTimeApi().then(res => {
    let resData = res.data
    if (resData.code == 200) {
      queryParams.yearmonth = resData.data
      // dateFormat(new Date(updateDate).getTime(), 'YYYY-MM')
    }
  })
}
let projectList = ref([]) // 项目列表
// 获取项目列表
const getPorjectList = async () => {
  await dbPublicApi.queryProjectPcApi({ dataTime, resourceKey }).then((res) => {
    if (res.data.code == 200) {
      projectList.value = res.data.data
    }
  })
}
getPorjectList()
// 获取楼层列表
const getFloorList = async () => {
  await detailApi.wholeBrandFloorDownApi({ biProjectCode: queryParams.projectCode }).then((res) => {
    if (res.data.code == 200) {
      floorList.value = res.data.data
    }
  })
}
getFloorList()
// 获取品牌下拉筛选
const getBrandDownList = async () => {
  await detailApi.brandControlApi({ projectCode: queryParams.projectCode, yearmonth: queryParams.yearmonth }).then((res) => {
    if (res.data.code == 200) {
      brandDownList.value = res.data.data
    }
  })
}
//切换项目
const changeProject = () => {
  queryParams.brandName = ''
  queryParams.floorName = ''
  getBrandDownList()
  getFloorList()
}
// 获取二级业态列表
const getTwoLevelDownList = async () => {
  await detailApi.wholeBrandTwoLevelDownApi().then((res) => {
    if (res.data.code == 200) {
      twoLevelList.value = res.data.data
    }
  })
}
getTwoLevelDownList()

//合并表头
const multistageData = {}
let test = ref(0)
let indexByENGArr = ['first', 'second', 'third', 'fourth', 'fifth', 'sixth']
const initMultistageData = (queryTime) => {
  multistageData['multCol_avg'] = {
    key: 'multCol_avg',
    title: `近6个月月均经营指标`,
    childrenIndex: [9, 10, 11, 12, 13, 14, 15]
  }
  let startIndex = 16 //近六月数据列起点索引值
  let keyCount = 8//每组数据字段数
  let num = 6 //近6个月的
  let month = new Date(queryTime).getMonth() + 1 //当前月份
  let year = new Date(queryTime).getFullYear() //当前年
  for (let i = 0; i < num; i++) {
    let yearStr = ''
    let monthStr = ''
    if (month > i) {
      yearStr = year
      monthStr = month - i
    } else {
      yearStr = year - 1
      monthStr = 12 + month - i
    }
    let arr = []
    for (let j = 0; j < keyCount; j++) {
      arr[j] = startIndex
      startIndex++
    }
    multistageData['multCol_' + indexByENGArr[i]] = {
      key: 'multCol_' + indexByENGArr[i],
      title: `${yearStr}年${monthStr}月`,
      childrenIndex: arr
    }
    test.value++
  }
  // console.log(multistageData, 'multistageData');
}

const getList = () => {
  tableData.loading = true
  detailApi.brandMonitoringListApi(queryParams).then(res => {
    if (res.data.code == 200) {
      initMultistageData(queryParams.yearmonth)
      tableData.data = res.data.data.list
      tableData.total = res.data.data.total
    }
    tableData.loading = false
  }).catch(err => {
    console.log(err);
    tableData.loading = false
  })
}

const init = async () => {
  await queryDataUpdateTime()
  getBrandDownList()
  getList()
}
init()

// 导出
async function handleDownload() {
  const fileName = `${pageType == '1' ? '新开业明细表' : '租售比明细表'}.xls`;
  let fileData = await detailApi.brandMonitoringExportExcelApi(queryParams);
  downloadNewFile(fileData.data, fileName);
}

</script>

<style scoped lang="scss">
:deep(.cur-tooltip) {
  max-width: 230px;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
  text-align: center;
  line-height: 1.4;
}
</style>